<html>

<head>
	<meta charset="utf-8">
	<title>Biography</title>
	<link rel="stylesheet" href="./biography.css" />
	<!-- <script type = "text/javascript" src = "./biography.js"></script> -->
	<script type="text/javascript" src='./jquery-3.6.4.min.js'></script>
</head>

<body>
	<section class="contents" id="contents">
		<div class="container">
			<div class="select-year__header">
				<select class="form-control  info-select" id="YearSelect">
					<option>--</option>
				</select>
			</div>

			<ul class="biography-list" id="YearList">
				<!-- <li> <strong>1/3-</strong><br> CX<br />｢VS魂｣<text style="color: red;">【岸優太】</text> </li> -->
			</ul>
		</div>
	</section>
	<script>
		$(document).ready(function () {
			//获取json数据并选取特定年份展示在页面上
			showData = function (y = 2023) {
				$.ajax({
					url: "all_list.json",
					type: "GET",
					dataType: "json",
					success:
						function (data) {
							showList(data, y = y)
						}
				});
			}

			//将某一年的数据填充到页面列表中
			showList = function (data, y) {
				let yid = y - 2011;
				let worklist = data[yid].worklist;
				// console.log(worklist);
				for (let i = 0; i < worklist.length; i++) {
					var li_str = '<li> <strong>';
					li_str += worklist[i].data.toString() + '</strong>'; //日期
					if (worklist[i].type != "") { //日程类型
						li_str += '<br>' + worklist[i].type.toString();
					}
					li_str += '<br>' + worklist[i].name.toString(); //名称
					if ('content' in worklist[i]) { //如果还有其他内容
						li_str += '<br>' + worklist[i].content.toString()
					}
					if ('member' in worklist[i]) {
						member_arr = worklist[i].member.map(showMember)
						li_str += '<br>' + member_arr.join()
					}
					li_str += '</li>';
					$('#YearList').append(li_str);
				}

			}

			showMember = function (member) {
				// console.log(member)
				if (member.indexOf("岸優太") !== -1) {
					return ('<text style="color: ' + '#9932CC' + ';">【' + member + '】</text>')
				} else if (member.indexOf("神宮寺勇太") !== -1) {
					return ('<text style="color: ' + '#008B8B' + ';">【' + member + '】</text>')
				} else if (member.indexOf("永瀬廉") !== -1) {
					return ('<text style="color: ' + '#696969' + ';">【' + member + '】</text>')
				} else if (member.indexOf("平野紫耀") !== -1) {
					return ('<text style="color: ' + '#8B0000' + ';">【' + member + '】</text>')
				} else if (member.indexOf("髙橋海人") !== -1) {
					return ('<text style="color: ' + '#DAA520' + ';">【' + member + '】</text>')
				} else { //maybe some data
					return ('</br>' + member)
				}
			}

			//选择框，动态生成年份
			var select_html = '';
			for (var i = 2011; i <= 2023; i++) {
				var value = i.toString();
				select_html += '<option>' + value + '</option>';
			}
			$('#YearSelect').append(select_html);

			showData();//填充初始数据，默认2023年

			//year选择框响应函数
			$('#YearSelect').change(() => {
				let choose_y = $('#YearSelect').val();
				console.log($('#YearSelect').val());
				$("#YearList").find("li").remove();
				showData(y = choose_y)
			});
		});

	</script>

</body>

</html>